<template>
    <div>
        <el-row>
           <el-col :span="18">
                绿地安全卫士后台管理系统
            </el-col>
            <el-col :span="6">
                <div  class="right">
                    <span class="wellcome">欢迎您</span>
                    <el-avatar :src="user.userPhotoUrl"></el-avatar>
                    <el-dropdown @command="click">
                        <span class="el-dropdown-link">
                            设置<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" placement="top">
                            <el-dropdown-item icon="el-icon-user" command="person">个人中心</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-switch-button" command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-col>
        </el-row>
       
         
    </div>
</template>

<script>
import { LoginOut } from "../../axios";
export default {
    name: 'Header',
    data() {
        return {
            user:[]
        };
    },
    mounted() {
        this.initData()
    },
    methods: {
        initData(){
            this.user = this.$ls.get("loginUser")
        },
        click(data){
            switch(data){
                case "person":
                     this.$notify({title: 'sucess',message: '点击个人中心',type: 'success'});
                break
                case "logout":
                    this.outLogin()
                break
            }
        },
        outLogin(){
            console.log("点击退出登录");
            window.localStorage.clear()
            window.sessionStorage.clear()
            this.$notify({title: 'sucess',message: '退出登录成功',type: 'success'});
            LoginOut();
            this.$router.push("/")
            setTimeout(()=>{
                window.location.reload()
            },1000) 
        }
    },
};
</script>

<style scoped>
.right{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.wellcome{
    font-size: 14px;
    color: rgb(137, 136, 136);
    margin-right: 10px;
}
.el-avatar{
    margin-right: 10px;
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 0px;
  }
</style>